<template>
  <el-select v-model="pageCode" placeholder="请选择数据" @change="changeList"  style="width: 100%">
    <el-option
      v-for="item in options"
      :key="item.dictValue"
      :label="item.dictLabel"
      :value="item.dictValue">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: 'dictionary-select',
    props: {
      // 字典类型值
      dictType: {
        type: String,
        default: ''
      },
      // 数据字典code
      dictionaryName: {
        type: String,
        default: ''
      },
      // 数据字典Name
      dictionaryCode: {
        type: String,
        default: ''
      },
      // 当前下拉框宽度
      restStyle: {
        type: String,
        default: 'width: \'185px\''
      }
    },
    data () {
      return {
        // 列表
        options: [],
        // 字段框选中code
        pageCode: this.dictionaryCode,
        pageName: this.dictionaryName
      }
    },
    methods: {
      // 当数据发生改变时，更改父组件传值
      changeList (code) {
        this.options.forEach(item => {
          if (item.dictValue === code) {
            this.pageName = item.dictLabel
          }
        })
        this.$emit('update:dictionaryCode', this.pageCode)
        this.$emit('update:dictionaryName', this.pageName)
      }
    },
    mounted () {
      this.$http({
        url: this.$http.adornUrl(this.$API.BASE_INFO.SYSDICT_DATA.LIST),
        method: 'get',
        params: this.$http.adornParams({
          'page': 1,
          'limit': 30,
          'dictType': this.dictType
        }, false)
      }).then(({data}) => {
        this.options = data.list
      })
    },
    watch: {
      dictionaryCode (val) {
        this.pageCode = val
      }
    }
  }
</script>

<style scoped>

</style>
